<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#httpServletRequest.getContextPath()+'/'}">
    <meta charset="UTF-8">
    <title>springboot+策略模式 实现简单促销</title>
</head>
<body>
<h2>提交商品</h2>

<body>

<table>
    <tr>
        <td>商品名称</td>
        <td>商品价格</td>
        <td>商品数量</td>
        <td>操作</td>
    </tr>
    <tr>
        <td><input id="name" /></td>
        <td><input id="amount" type="number" /></td>
        <td><input id="quantity" type="number" /></td>
        <td><input type="button" value="添加该商品" onclick="data()"/></td>
    </tr>
</table>


<h6>购物车商品</h6>
<div width="400px" height="400px" id="showShoop"></div>


<br>
<input  type="button" onclick="sub()" value="将这些商品进行促销"/>
<br>

<h6>参加促销信息展示</h6>
<div width="400px" height="400px" id="showPro"></div>


<h6>已添加商品信息展示</h6>
<table>
    <tr>
        <td>商品编号</td>
        <td>商品名称</td>
        <td>商品数量</td>
        <td>优惠后总价</td>
        <td>总优惠金额</td>
    </tr>
    <tbody id="showTab"></tbody>
</table>

<img src="/images/cx.png"  />

</body>

<script src="/jquery-1.11.3.min.js"></script>
<script>

    var products = [];
    var num = 1;
    <!-- 准备数据 -->
    function data(){
        var name = $("#name").val();
        var amount = $("#amount").val();
        var quantity = $("#quantity").val();
        if(name=="" || amount=="" || quantity=="" || name==undefined || amount==undefined || quantity==undefined ){
            alert("商品格式有误");
            return ;
        }
        var code = "youxiu-"+ num;
        num=num+1;
        var product = {"code":code,"name":name,"amount":amount,"quantity":quantity};
        products.push(product);
        console.log(products);

        var em = "<span>"+product.name+"--"+product.quantity+"--"+product.amount+"</span><br>";
        $("#showShoop").append(em);
    }

    function sub(){
        if(products.length<=0){
            alert("请添加商品");
            retur;
        }
        $.ajax({
            type: 'POST',
            url: "/data",
            data: JSON.stringify(products),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(map){
                if(map==null){
                    alert("出错了");
                }
                var promotionResult = map.promotionResult;
                var result = map.products;
                console.log("促销结果:");
                console.log(promotionResult);
                console.log();
                console.log("促销后商品信息:");
                console.log(result);

                //促销信息展示
                $("#showPro").empty();
                for(var i=0;i<promotionResult.length;i++){
                    var em = "<span>"+promotionResult[i].name+"------"+promotionResult[i].result+"</span><br>";
                    $("#showPro").append(em);
                }

                //促销商品展示
                $("#showTab").empty();
                for(var i=0;i<result.length;i++){
                    var em = "<tr><td>"+result[i].code+"</td><td>"+result[i].name+"</td><td>"+result[i].quantity+"</td><td>"+result[i].finalAmount+"</td><td>"+result[i].discountAmount+"</td></tr>";
                    $("#showTab").append(em);
                }
            },
            error:function(map){
                alert(map);
                console.log(map);
            }
        });
    }

</script>

</html>